<template>
	<form class="ff-form">
		<slot />
	</form>
</template>

<script>
	export default {
		name: "ff-form",
		components: {},
		props: {
			rules: {
				type: Object,
				default: ()=>{return {}},
			},
		},
		data() {
			return {
			
			};
		},
		computed: {
			formItems() {
				let list = []
				let children = this.$ff.util.getChildrenByList('$children', this.$children)
				for (let i = 0; i < children.length; i++) {
					if (children[i].$options.name == 'ff-form-item') {
						list.push(children[i])
					}
				}
				return list
			},
			rulesAll() {
				let formItems = this.formItems
				let rules = this.rules
				for (let i = 0; i < formItems.length; i++) {
					if (rules.hasOwnProperty(formItems[i].$props.prop) == false) {
						rules[formItems[i].$props.prop] = []
					}
					for (var j = 0; j < formItems[i].$props.rules.length; j++) {
						rules[formItems[i].$props.prop].unshift(formItems[i].$props.rules[j])
					}
				}
				return rules
			},
		},
		mounted() {

		},
		methods: {
			validate(callback) {
				let keys = Object.keys(this.rulesAll)
				for (let i = 0; i < keys.length; i++) {
					let showItem = true
					let formItems = this.formItems
					for (let j = 0; j < formItems.length; j++) {
						if (formItems[j].$props.prop == keys[i]) {
							console.log(keys[i])
							showItem = false
						}
					}
					if (showItem) {
						console.log(keys[i])
					}
				}
				return callback(true);
			},
			validateField(prop, callback) {
				let keys = Object.keys(this.rulesAll)
				for (let i = 0; i < keys.length; i++) {
					let formItems = this.formItems
					for (let j = 0; j < formItems.length; j++) {
						if (formItems[j].$props.prop == keys[i]) {
							console.log(keys[i])
						}
					}
				}
				return callback(true);
			},
		}
	}
</script>

<style>
	ff-form {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.ff-form {
		width: inherit;
		height: inherit;
		overflow: hidden;
	}
</style>